<template>
	<view class="bg-or height-100 overflow-hidden padding-lr">
		<view class="bg-white padding-lr margin-top-sm">
			<view class="flex-direction-row justify-between padding-tb border-bottom">
				<text class="text-df">就诊人姓名</text>
				<view>
					<text class="text-smd color-black-b">{{form.fullName}}</text>
				</view>
			</view>
			<view class="flex-direction-row justify-between padding-tb border-bottom">
				<text class="text-df">工号</text>
				<view>
					<text class="text-smd color-black-b">{{form.jobNo}}</text>
				</view>
			</view>
			<view class="flex-direction-row justify-between padding-tb border-bottom">
				<text class="text-df">性别</text>
				<view>
					<text class="text-smd color-black-b">{{form.gender === 1 ? '男' : '女'}}</text>
				</view>
			</view>
			<view class="flex-direction-row justify-between padding-tb border-bottom">
				<text class="text-df">电话</text>
				<view>
					<text class="text-smd color-black-b">{{form.mobile}}</text>
				</view>
			</view>
			<view class="flex-direction-row justify-between padding-tb border-bottom">
				<text class="text-df">自述症状</text>
				<view>
					<text class="text-smd color-black-b">{{ traditionalList.find(item => item.dictSort === form.selfnarrate)?.dictLabel }}</text>
				</view>
			</view>
			<view class="flex-direction-row justify-between padding-tb border-bottom">
				<text class="text-df">预约时间</text>
				<view>
					<text class="text-smd color-black-b">{{form.appointmentTime}}</text>
				</view>
			</view>
			<view class="margin-top margin-bottom-sm">
				<text class="text-df">病情描述</text>
			</view>
			<view class="padding bg-white radius-xl">
				<textarea v-model="form.diseaseDesc" :adjust-position="false" style="width: 630rpx; height: 150rpx;"
					placeholder="请输入病情描述" placeholder-class="text-smd color-gray" maxlength="200" />
			</view>
		</view>
		<view class="margin">
			<text class="">相关报告</text>
			<view class="flex-direction-row flex-wrap padding-tb">
				<block v-for="(item,index) in form.imageUrlList" :key="index">
					<view class="position-relative">
						<image :src="item" mode="aspectFit" class="cu-thumb margin-right-xs radius"></image>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			if (option) {
				this.id = decodeURIComponent(option.id)
				this.init()
				// 字典管理自述症状
				this.self_reported_symptoms();
			}
		},
		data() {
			return {
				form: {
					memberName: '',
					imageUrlList: [],
					diseaseDesc: '',
					appointmentTime: ''
				},
				loading: false,
				traditionalList: [],
			};
		},
		methods: {
			async self_reported_symptoms() {
				const res = await uni.$request.get('/commonApi/dict/type/self_reported_symptoms', {});
				if (res.code == 200) {
					this.traditionalList = res.data || [];
				}
			},
			async init() {
				this.loading = false
				uni.showLoading({
					mask: true
				})
				const res = await uni.$request.get(`/appointment/detail/${this.id}`);
				uni.hideLoading();
				if (res.code == 200) {
					this.form = res.data
				} else {
					uni.showModal({
						title: '提示',
						content: '查询失败',
						showCancel: false
					})
				}
			},
			makePhoneCall(phone) {
				uni.makePhoneCall({
					phoneNumber: this.form.storeManagement.mobile
				});
			},
		},
	};
</script>

<style scoped>
	/* 自定义样式（如有需要） */
	.info {
		flex: 1;
		padding-left: 10px;
		position: relative;
	}

	.title {
		font-size: 16px;
		margin: 10px 0;
		white-space: nowrap;
		/* 不换行 */
		overflow: hidden;
		/* 超出隐藏 */
		text-overflow: ellipsis;
		/* 超出显示省略号 */
		width: 200px;
	}

	.address {
		color: #999;
		font-size: 13px;
		padding-bottom: 10px;
		display: flex;
		align-items: center;
	}

	.boderSty {
		border: 0.2rpx solid #eee;
		padding: 10px;
		margin: 10px 0;
	}

	.doctor-info {
		display: flex;
	}

	.merchantSty {
		margin: 20px 0;
	}

	.colorSty {
		color: #999;
	}

	.avatar {
		width: 60px;
		height: 60px;
	}

	.details {
		flex: 1;
		padding-left: 10px;
	}

	.doctor-name {
		font-weight: bold;
	}

	.description {
		color: #999;
		margin-top: 8px;
	}

	.tags {
		font-size: 12px;
		margin-top: 10px;
	}

	.tag {
		background-color: #D7D7D7;
		color: #666666;
		padding: 2px 5px;
		margin-right: 5px;
		border-radius: 3px;
	}
</style>